<template>
  <el-drawer size="265px" :visible.sync="show" :with-header="false" :before-close="close">
    <div class="drawer-con">
      <p class="title">主题风格</p>
      <div class="theme-wrap">
        <div class="item" v-for="(item, index) in dayThemeList" :key="item.theme" @click="setThemestyle(item.theme)">
          <div class="box">
            <div :style="{background: item.color[0] + '!important'}"></div>
            <div :style="{background: index === 2 ? item.color[1] : item.color[0] + '!important'}"></div>
          </div>
          <p class="name"></p>
          <div class="active" v-show="item.theme === currentView"></div>
        </div>
      </div>

      <p class="title" style="margin-top: 35px">导航栏风格</p>
      <div class="menu-theme-wrap">
        <div class="item" v-for="item in themeList" :key="item.theme" @click="setUpTheme(item.theme)">
          <div class="box">
            <div class="top" :style="{ background: item.topbar + '!important' }" ></div>
            <div class="left" :style="{ background: item.menuLeftBc + '!important' }"></div>
          </div>
          <div class="active" v-if="item.theme === currentTheme"></div>
        </div>
      </div>

      <p class="title" style="margin-top: 40px">基础设置</p>
      <div class="basic-box">
        <!-- 是否启用导航栏手风琴模式 -->
        <div class="item" style="display: flex">
          <span>是否启用导航栏手风琴模式</span>
          <el-switch v-model="uniqueOpened" active-color="#1F8CEB" inactive-color="#cccccc" @change="setLeftMenuUniqueOpened">
          </el-switch>
        </div>
        <!-- 是否显示折叠导航栏按钮 -->
        <div class="item">
          <span>是否显示折叠导航栏按钮</span>
          <el-switch v-model="showMenuButton" active-color="#1F8CEB" inactive-color="#cccccc" @change="setLeftMenuButton">
          </el-switch>
        </div>
        <!-- 是否显示用户头像 -->
        <div class="item">
          <span>是否显示头像</span>
          <el-switch v-model="showAvatar" active-color="#1F8CEB" inactive-color="#cccccc" @change="setshowAvatar"></el-switch>
        </div>
        <!-- 是否显示面包屑导航栏 -->
        <div class="item mobile-hide">
          <span>是否显示面包屑导航栏</span>
          <el-switch v-model="showCrumbs" active-color="#1F8CEB" inactive-color="#cccccc" @change="setLeftMenuCrumbs">
          </el-switch>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import setting from '../../utils/setting'
import { mapState } from 'vuex'

export default {
  name: 'Personality',
  props: {
    show: Boolean
  },
  data() {
    return {
      themeList: setting.themeList, // 导航栏样式列表
      dayThemeList: [
        {
          theme: 'white',
          color: ['#fff', '#fff']
        },
        {
          theme: 'dark',
          color: ['#22252A']
        },
        {
          theme: 'auto',
          color: ['#fff', '#22252A']
        }
      ],
      currentTheme: '', // 当前得导航栏主题
      uniqueOpened: '', // 是否开启手风琴模式
      showMenuButton: '', // 是否显示展开收缩按钮
      showCrumbs: '', // 是否展示面包屑导航
      showAvatar: '', // 是否展示头像
      currentView: '', // 主题模式
      dayList: [6, 18]
    }
  },
  computed: {
    ...mapState({
      usersetting: state => state.Usersetting.setting
    })
  },
  watch: {
    'usersetting': {
      handle() {
        this.initUserSetting()
      }
    }
  },
  created() {
    this.initUserSetting()
  },
  mounted() {
    this.initUserSetting()
    this.setThemestyle(JSON.parse(localStorage.getItem('usersetting')).themeModel)
  },
  methods: {
    // 初始化用户主题设置
    initUserSetting() {
      let { themeModel, uniqueOpened, showMenuButton, showCrumbs, showAvatar, theme  } = this.usersetting  // JSON.parse(localStorage.getItem('usersetting'))
      this.currentTheme = theme
      this.uniqueOpened = uniqueOpened
      this.showMenuButton = showMenuButton
      this.showCrumbs = showCrumbs
      this.showAvatar = showAvatar
      this.currentView = themeModel
      // 如果this.currentView没有值 就将setting.themeModel作为默认值
      if(!this.currentView) {
        this.currentView = setting.themeModel
      }
    },
    // 设置导航栏主题
    setUpTheme(theme) {
      this.currentTheme = theme
      this.$store.dispatch('setUpTheme', theme)
      this.setlocalstoragr()
    },
    // 初始化导航栏主题
    initThemeModel(){
      let { currentView, dayList } = this
      if(currentView === 'auto') {
        this.setThemestyle('auto')
      }else{
        this.setThemestyle(currentView)
      }
    },
    // 切换全局主题风格
    setThemestyle(theme) {
      let el = document.getElementsByTagName("html")[0]
      // 动态添加类
      if(theme === 'dark') {
        el.setAttribute("class","dark-body")
      }else if(theme === 'white') {
        el.removeAttribute('class')
      }else if(theme === 'auto') {
        this.setAutoThemeModel(el)
      }
      this.currentView = theme
      this.setThemeModel()
    },
    // 根据自动切换主题
    setAutoThemeModel(el) {
      let d = new Date()
      let h = d.getHours()
      let { dayList } = this
      this.currentView = 'auto'
      this.setThemeModel()

      if(h >= dayList[0] && h < dayList[1]) {
        el.removeAttribute('class')
      }else {
        el.setAttribute("class","dark-body")
      }
    },
    // 是否开启手风琴模式
    setLeftMenuUniqueOpened() {
      this.$store.dispatch('setLeftMenuUniqueOpened', {
        show: this.uniqueOpened
      })
      this.setlocalstoragr()
    },
    // 是否显示菜单展开收缩按钮
    setLeftMenuButton() {
      this.$store.dispatch('setLeftMenuButton', {
        show: this.showMenuButton
      })
      this.setlocalstoragr()
    },
    // 是否显示全局面包屑
    setLeftMenuCrumbs() {
      this.$store.dispatch('setLeftMenuCrumbs',{
        show: this.showCrumbs
      })
      this.setlocalstoragr()
    },
    // 是否显示用户头像
    setshowAvatar() {
      this.$store.dispatch('setshowAvatar',{
        show: this.showAvatar
      })
      this.setlocalstoragr()
    },
    // 主题模式
    setThemeModel() {
      this.$store.dispatch('setThemeModel', this.currentView)
      this.setlocalstoragr()
    },
    // 每一次修改配置调用setlocalstoragr,将设置存放进localstorage
    setlocalstoragr() {
      window.localStorage.setItem('usersetting',JSON.stringify(this.usersetting))
    },
    // 关闭个性化抽屉
    close() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
  /* 去除drawer点击时候出现的边框 */
  .el-drawer:focus {
    outline: none !important;
  }

  .el-switch .el-switch__core {
    width: 35px !important;
  }
</style>

<style lang="scss" scoped>
 .drawer-con {
    padding: 30px 20px;

    .title {
      text-align: center;
      color: #000;
      font-size: 13px;
      position: relative;

      &::before {
        content: '';
        width: 50px;
        border-bottom: 2px solid #F3F4F5;
        position: absolute;
        left: 0;
        top: 10px;
        margin: auto;
      }

      &::after {
        content: '';
        width: 50px;
        border-bottom: 2px solid #F3F4F5;
        position: absolute;
        right: 0;
        top: 10px;
        margin: auto;
      }
    }

    .theme-wrap {
      display: flex;
      flex-wrap: wrap;
      margin-top: 25px;
       
      .item {
        width: 65px;
        box-sizing: border-box;
        margin-right: 15px;

        &:last-of-type {
          margin-right: 0;
        }

        .box {
          width: 100%;
          height: 45px;
          box-shadow: 0 0 5px #ccc;
          position: relative;
          background: #F5F7F9;
          box-sizing: border-box;
          border-radius: 6px;
          transition: box-shadow .1s;
          cursor: pointer;
          display: flex;
          overflow: hidden;

          >div {
            width: 50%;
            height: 100%;
          }
        }

        .name {
          text-align: center;
          margin-top: 6px;
          color: #515a6e;
          font-size: 12px;
        }

        .active {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          position: relative;
          left: 0;
          right: 0;
          bottom: -5px;
          margin: auto;
          background: #19BE6B !important;
        }
      }
    }

    .menu-theme-wrap {
      display: flex;
      // flex-wrap: wrap;
      margin-top: 20px;
       
      .item {
        width: 65px;
        margin-right: 15px;

        .box {
          width: 65px;
          height: 45px;
          box-shadow: 0 0 5px #ccc;
          position: relative;
          background: #F5F7F9 !important;
          box-sizing: border-box;
          border-radius: 6px;
          overflow: hidden;
          transition: box-shadow .1s;
          cursor: pointer;

          &:hover {
            box-shadow: 0 0 10px #ccc;
          }

          &:nth-child(even) {
            margin-right: 0;
          }

          .top {
            width: 100%;
            height: 8px;
          }

          .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 16px;
            height: 100%;
          }
        }

        .active {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin: auto;
          margin-top: 8px;
          background: #19BE6B !important;
        }
      }
    }

    .basic-box {

      .item {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        span {
          color: #515a6e;
          font-size: 14px;
        }
      }
    }
  }
</style>